<template>
  <div class="main-box bg-[var(--el-bg-color)] p-20px h-1/1 overflow-y-auto">
    <el-form :model="formData" label-width="100" ref="formRef" :rules="rules">
      <el-form-item label="户型名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="面积" prop="area">
        <el-input-number v-model="formData.area" placeholder="暂无资料" :min="0" :max="10000"></el-input-number>
        <span class="ml-10px">m²</span>
      </el-form-item>
      <el-form-item label="户型" prop="roomType">
        <div class="flex flex-row">
          <el-select v-model="formData.roomId" placeholder="请选择户型" class="w-120px">
            <el-option v-for="(p, index) in roomList" :key="index" :label="p.name" :value="p.id"></el-option>
          </el-select>
          <div class="flex flex-row">
            <el-input-number :min="0" :max="10" v-model="formData.office" class="w-110px"></el-input-number>
            <span class="mx-10px">厅</span>
          </div>
          <div class="flex flex-row">
            <el-input-number :min="0" :max="10" v-model="formData.bathRoom" class="w-110px"></el-input-number>
            <span class="ml-10px">卫</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="排序值">
        <el-input-number v-model="formData.sort" :min="1" :max="100000"></el-input-number>
      </el-form-item>
      <el-form-item label="贷款形式">
        <el-select v-model="formData.room_pay_type">
          <el-option v-for="(p, index) in daikuanList" :key="index" :value="p.value" :label="p.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="首付">
        <el-input-number v-model="formData.firstPay" :min="0" :max="10"></el-input-number>
        <span class="ml-10px">成</span>
      </el-form-item>
      <el-form-item label="是否上架">
        <el-switch
          v-model="formData.grounding"
          :active-value="true"
          :inactive-value="false"
          active-text="上架"
          inactive-text="下架"
        ></el-switch>
      </el-form-item>
      <el-form-item label="参考价格">
        <el-input-number v-model="formData.referencePrice" :max="10000000" :min="0" placeholder="售价待定"></el-input-number>
        <span class="ml-10px">元/m²</span>
        <span class="ml-20px text-14px text-[var(--el-color-info-light-3)]">(不填写或者为0则默认为楼盘参考价)</span>
      </el-form-item>
      <el-form-item label="朝向" prop="forward">
        <el-select v-model="formData.forward" placeholder="请选择朝向">
          <el-option v-for="(p, index) in forwardList" :key="index" :label="p.label" :value="p.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物业用途" prop="propertyUse">
        <el-select v-model="formData.propertyUse">
          <el-option v-for="(p, index) in proList" :key="index" :label="p.name" :value="p.statusCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="销售状态" prop="status">
        <el-select v-model="formData.status">
          <el-option v-for="(p, index) in sellList" :key="index" :label="p.name" :value="p.statusCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="封面" prop="cover">
        <choose-file v-model:url="formData.cover"></choose-file>
      </el-form-item>
      <el-form-item class="pb-20px">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive, ref } from "vue";
import { getRoomTypeList } from "@/api/modules/room";
import { getSellList } from "@/api/modules/sellStatus";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { createRoom, editRoom, getRoom } from "@/api/modules/room";
import { useRoute, useRouter } from "vue-router";
import { getPropertyList as getPropertyListApi } from "@/api/modules/property";
import ChooseFile from "@/components/ChooseFile/index.vue";

const route = useRoute();
const router = useRouter();

const sellList = ref();
// 物业类型
const proList = ref();
const getPropertyList = async () => {
  const { data } = await getPropertyListApi();
  proList.value = data;
};

const getStatusList = async () => {
  const { data } = await getSellList();
  sellList.value = data;
};

// 贷款形式
const daikuanList = ref([
  { label: "住宅", value: 0 },
  { label: "商业", value: 1 }
]);

// ---户型选择
const roomList = ref();

// ---朝向
const forwardList = reactive([
  { label: "暂无", value: 0 },
  { label: "东", value: 1 },
  { label: "东南", value: 2 },
  { label: "南", value: 3 },
  { label: "西南", value: 4 },
  { label: "西", value: 5 },
  { label: "西北", value: 6 },
  { label: "北", value: 7 },
  { label: "东北", value: 8 },
  { label: "南北", value: 9 }
]);

const getRoomList = async () => {
  const { data } = await getRoomTypeList();
  roomList.value = data;
};

const initData: any = {
  id: 0,
  grounding: true,
  sort: 1, //排序值
  area: undefined, //面积
  name: "",
  roomId: undefined, //户型
  office: 0, //厅
  bathRoom: 0, //卫
  forward: 0, //朝向
  referencePrice: undefined, //参考单价
  louPanId: 0, //所属楼盘
  status: undefined, //销售情况
  cover: "", //封面
  propertyUse: undefined, //物业用途
  firstPay: 3 //首付
};

const rules: FormRules = {
  name: [
    { required: true, message: "户型名称不可为空" },
    { min: 2, max: 10, message: "字符2-10个字" }
  ],
  area: [{ required: true, message: "面积不可为空" }],
  RoomType: [{ required: true, message: "户型不可为空" }],
  forward: [{ required: true, message: "朝向不可为空" }],
  propertyUse: [{ required: true, message: "物业用途不可为空" }],
  status: [{ required: true, message: "销售状态不可为空" }],
  cover: [{ required: true, message: "封面不可为空" }]
};

const formData = ref(JSON.parse(JSON.stringify(initData)));

const formRef = ref<FormInstance>();

const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (valid) {
      formData.value.louPanId = parseInt(route.query.id as string);
      try {
        if (!route.query.roomId) {
          await createRoom(formData.value);
        } else {
          formData.value.id = parseInt(route.query.roomId as string);
          await editRoom(formData.value);
        }
        ElMessage.success("成功");
        router.back();
      } catch (error) {}
    }
  });
};

const getRoomInfo = async () => {
  const { data } = await getRoom(parseInt(route.query.roomId as string));
  console.log(data);
  const newData = data as any;
  formData.value.name = newData.name;
  formData.value.area = newData.area;
  formData.value.roomId = newData.roomType.id;
  formData.value.office = newData.office;
  formData.value.bathRoom = newData.bathRoom;
  formData.value.sort = newData.sort;
  formData.value.firstPay = newData.firstPay;
  formData.value.grounding = newData.grounding;
  formData.value.referencePrice = newData.referencePrice;
  formData.value.forward = newData.forward;
  formData.value.propertyUse = newData.propertyUse;
  formData.value.status = newData.sell_status.statusCode;
  formData.value.cover = newData.cover;
  formData.value.room_pay_type = newData.room_pay_type;
};

onBeforeMount(() => {
  Promise.all([getRoomList(), getStatusList(), getPropertyList()]);
  if (route.query.roomId) {
    getRoomInfo();
  }
});
</script>

<style></style>
